import { ObjectDirective, DirectiveBinding, App } from "vue";

export interface IDirectiveOptionsWithInstall extends ObjectDirective {
  install?: (app: App) => void;
}

interface Roles {
    id: string,
    roleName: string,
    roleKey: string
}

const checkPermission = (el: HTMLElement, binding: DirectiveBinding) => {
  const { value = '' } = binding;

  console.log('value', value)

  const roles:Array<Roles> = [
    {
      id: "0632a2e6eb5b11eb9e8bfa166eb6b72f",
      roleName: "配置管理员",
      roleKey: "PZGLY",
    },
    {
      id: "06ceaec3eb5b11eb9e8bfa166eb6b72f",
      roleName: "平台管理员",
      roleKey: "PTGLY",
    },
    {
      id: "09463c995f68375209ff4e66aa66ba56",
      roleName: "证照实施（省）",
      roleKey: "PROV_LICENCE_IMPL",
    },
  ];
  return roles.some((item: Roles) => value.includes(item.roleKey));
};


// 默认相当于 mounted and updated
const plugin = (el: HTMLElement, binding: DirectiveBinding) => {
    // 校验按钮权限
    const hasPermission =  checkPermission(el, binding);
    
    // 给按钮添加禁用样式
    if(!hasPermission) el.classList.add('is-disabled');

    // 拦截点击事件
    el.addEventListener('click', function handle(e: Event){
      if(!hasPermission) {
        e.cancelBubble = true;

        console.log('没有权限')
      }
    }, true);
  }
  
  export default plugin as IDirectiveOptionsWithInstall;
  